<script setup>
import { ref, onMounted } from 'vue'
import baseService from '@/service/baseService.js'

const items = ref([])
const dataList = ref([])
const finished = ref(false)
const activeIndex = ref(0)

/**
 * 分页参数
 */
const dataForm = {
	pageNum: 1,
	pageSize: 10,
	developId: 1,
}

/**
 * 获取开发语言列表
 */
const getDevelopList = () => {
	baseService.get('/framework/develop/list').then(({ data }) => {
		if(data && data.code === 0) {
			items.value = data.result || []
		}else {
			uni.showToast({
				icon: 'none',
				title: data.message
			})
		}
	})
}

/**
 * 获取列表数据
 */
const getDataList = () => {
	if(finished.value) {
		return uni.showToast({ icon: 'none', title: '没有更多数据~' })
	}
	baseService.post('/framework/order/list', dataForm).then(({ data }) => {
		if(data && data.code === 0) {
			var res = data.result.pageList || []
			dataList.value.push(...res)
			// 分页条件
			if (dataForm.pageNum < data.result.pages) {
			  // 页码累加
			  dataForm.pageNum++
			} else {
			  finished.value = true
			}
		}else {
			uni.showToast({
				icon: 'none',
				title: data.message
			})
		}
	})
}

/**
 * 重置列表数据
 */
const resetDataList = () => {
	dataForm.pageNum = 1
	dataList.value = []
	finished.value = false
}

/**
 * tab切换事件
 */
const doClickItemHandle = (index) => {
	if(activeIndex.value !== index) {
		activeIndex.value = index
		dataForm.developId = items.value[index].id
		resetDataList()
		getDataList()
	}
}

// 组件挂载完毕
onMounted(() => { getDataList(), getDevelopList()})

defineExpose({ resetDataList, getDataList })
</script>

<template>
  <view class="classify">
		<uni-section title="援军令" type="line">
			<scroll-view scroll-x>
				<view class="segmented-control segmented-control--text">
					<view v-for="(item, index) in items" :key="item.id" class="segmented-control__item" @tap="doClickItemHandle(index)">
						<view>
							<text class="segmented-control__text"
								:style="{color:index === activeIndex? '#4cd964': ''}"
								:class="index === activeIndex ? 'segmented-control__item--text': ''">
								{{ item.name }}
							</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="uni-group group--uni-group uni-group--card group--uni-group--card" style="margin-top:10px"
				v-for="item in dataList" :key="item.id">
				<view class="uni-group__title group--uni-group__title">
					<text class="uni-group__title-text group--uni-group__title-text">{{ item.serialNumber }}</text>
				</view>
				<view class="uni-group__content group--uni-group__content">
					<navigator
						hover-class="none"
						class="classify_content"
						:url="`/pages/classify/classify?id=${item.id}`">
						<view class="classify_name">{{ item.name }}</view>
						<view class="classify_icon">{{ item.icon }}</view>
						<view>
							<uni-tag v-if="item.type === 1" :inverted="true" text="需求" type="success" size="mini" />
							<uni-tag v-else :inverted="true" text="BUG" type="success" size="mini" />
						</view>
						<view>
							<uni-tag v-if="item.status === 3" :inverted="true" text="可接单" type="success" size="mini" />
							<uni-tag v-else-if="item.status === 4" :inverted="true" text="进行中" type="success" size="mini" />
							<uni-tag v-else :inverted="true" text="已结束" type="success" size="mini" />
						</view>
						<view class="classify_tag">
							<view class="classify_tag_view" v-for="(e, i) in item.label" :key="i">
								<uni-tag :inverted="true" :text="e" type="error" size="mini" />
							</view>
						</view>
					</navigator>
					<view class="classify_image">
						<image src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_1.jpg"></image>
					</view>
				</view>
			</view>
		</uni-section>
		<view class="loading-text">
		  {{ finished ? '没有更多数据~' : '正在加载...' }}
		</view>
  </view>
</template>

<style lang="scss">
.classify {
	display: flex;
	flex-direction: column;
  margin: 20rpx 0 0;
  padding: 10rpx 0;
  min-height: 328rpx;
	border-radius: 10rpx;
	background-color: #fff;
	
	.segmented-control {
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-direction: row;
		height: 24px;
		overflow: hidden;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
		width: 3500rpx;
	}

	.segmented-control__item {
		/* #ifndef APP-NVUE */
		display: inline-flex;
		box-sizing: border-box;
		/* #endif */
		position: relative;
		flex: 1;
		justify-content: center;
		align-items: center;
	}

	.segmented-control__item--button {
		border-style: solid;
		border-top-width: 1px;
		border-bottom-width: 1px;
		border-right-width: 1px;
		border-left-width: 0;
	}

	.segmented-control__item--button--first {
		border-left-width: 1px;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
	}

	.segmented-control__item--button--last {
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
	}

	.segmented-control__item--text {
		border-bottom-style: solid;
		border-bottom-width: 2px;
		padding: 2px 0;
	}

	.segmented-control__text {
		font-size: 10px;
		line-height: 16px;
		text-align: center;
	}

	.uni-group {
	  background: #fff;
	  margin-top: 10px;
	}
	.uni-group__title {
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  padding-left: 15px;
	  height: 40px;
	  background-color: #eee;
	  font-weight: normal;
	  color: #666;
	}
	.uni-group__content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	  padding: 15px;
	}
	.group-conent-padding {
	  padding: 0 15px;
	}
	.uni-group__title-text {
	  font-size: 14px;
	  color: #666;
	}
	.distraction {
	  flex-direction: row;
	  align-items: center;
	}
	.uni-group--card {
	  margin: 10px;
	  border-radius: 5px;
	  overflow: hidden;
	  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.08);
	}
	
	.classify_content {
		flex: 1;
	}
	
	.classify_tag {
		display: flex;
		flex-direction: row;
		margin: 5rpx 5rpx 0 0;
	}
	
	.classify_image {
		flex: 1;
		text-align: center;
		
		image{
			width: 200rpx;
			height: 100rpx;
		}
		
	}
}
// 加载提示文字
.loading-text {
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0;
}

</style>
